<template>
  <el-table
    :data="commentList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="评论ID">
            <span>{{ props.row.commId }}</span>
          </el-form-item>
          <el-form-item label="文章ID">
            <span>{{ props.row.articleId }}</span>
          </el-form-item>
          <el-form-item label="当前用户ID">
            <span>{{ props.row.userId }}</span>
          </el-form-item>
          <el-form-item label="父评论ID">
            <span>{{ props.row.commUpId }}</span>
          </el-form-item>
          <el-form-item label="当前用户">
            <span>{{ props.row.userName }}</span>
          </el-form-item>
          <el-form-item label="父用户名">
            <span>{{ props.row.userUpName }}</span>
          </el-form-item>
          <el-form-item label="评论内容">
            <span>{{ props.row.content }}</span>
          </el-form-item>
          <el-form-item label="审核状态">
            <span>{{ props.row.status }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="评论ID"
      prop="commId">
    </el-table-column>
    <el-table-column
      label="用户名"
      prop="userName">
    </el-table-column>
    <el-table-column
      label="评论内容"
      prop="content">
    </el-table-column>
    <el-table-column
      label="审核状态">
      <span v-text="this.statusIf(commentList.status)"></span>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row,scope.$index,commentList)" type="text" size="small">通过</el-button>
        <el-button @click="handleNoClick(scope.row,scope.$index,commentList)" type="text" size="small">不通过</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getComment, upCheck } from '../../api/admin.js'
  export default {
    name: 'Comments',
    props: {
      query: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {
        commentList: [{
          commId: '',
          articleId: '',
          userId: '',
          userUpId: '',
          status: '',
          userName: '',
          userUpName: '',
          content: ''
        }]
      }
    },
    created(){
    },
    mounted(){
        this.getComment()
    },
    methods: {
        statusIf(i){
            switch(i){
                case 0:
                    return '未审核';
                    break
                case 1:
                    return '通过';
                    break
                case -1:
                    return '不通过';
                    break
                default:
                    return '未审核';
            }
        },
        getComment(){
            getComment().then(res =>{
                if (res.code == 200){
                    this.commentList = res.data    
                }else{
                    this.$message({type: "error",message: '评论获取失败'})
                }
            })
        },
        handleClick(row,index,rows){
          let that = this
          console.log("row数据",row)
          // that.commentList = row
          that.query.commId = row.commId;
          that.query.status = 1;
          console.log(that.query)
          upCheck(that.query).then(res => {
            this.$message({message:"评论审核成功=====" + res.message,type: 'success'})
            rows.splice(index, 1);
          }).catch(error => {
            console.log("评论审核错误=====",error)
          })
        },
        handleNoClick(row,index,rows){
          let that = this
          console.log("row数据",row)
          // that.commentList = row
          that.query.commId = row.commId;
          that.query.status = -1;
          console.log(that.query)
          upCheck(that.query).then(res => {
            this.$message({message:"评论审核成功=====" + res.message,type: 'success'})
            rows.splice(index, 1);
          }).catch(error => {
            this.$message.error("评论审核错误=====",error)
          })
        }

    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>